<template>
    <div id="bar" :style="{height:height,width:width}"/>
</template>

<script>


export default {
    props: {
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '250px'
        },
        autoResize: {
            type: Boolean,
            default: true
        },
        xAxisData: {
            type: Array,
            required: false
        },
        // 标题
        title: {
            type: String,
            required: false
        },
        // 默认展示几个点
        showSize: {
            type: Number,
            default: 5,
            required: false
        }
    },
    data() {
        return {
            myChart: null // 定义变量用来存放echarts实例: null
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    methods: {
        initChart() {
            let chartDom = document.getElementById('bar')
            this.myChart = this.$echarts.init(chartDom)

            let option
            let data = [
                { name: '高级风险', value: 78 },
                { name: '中级风险', value: 12 },
                { name: '低级风险', value: 10 }
            ]
            let dataHigh = data[0].value
            let dataMiddle = data[1].value
            let dataLow = data[2].value
            let total = 0
            for (let i = 0; i < data.length; i++) {
                total += data[i].value
            }

            let perHigh = ((dataHigh / total) * 100).toFixed(0) + '%'
            let perMiddle = ((dataMiddle / total) * 100).toFixed(0) + '%'
            let perLow = ((dataLow / total) * 100).toFixed(0) + '%'
            option = {
                backgroundColor: '#fff',
                title: [
                    {
                        text: '风险等级',
                        top: 10,
                        left: 30,
                        textStyle: {
                            color: '#35598d',
                            fontSize: 18,
                            fontWeight: 'normal'
                        }
                    },
                    {
                        text: '高级风险' + '{num|' + dataHigh + '}条',
                        bottom: '5%',
                        left: '14%',
                        textAlign: 'center',
                        textStyle: {
                            color: '#666',
                            fontSize: 20,
                            fontWeight: 'normal',
                            textAlign: 'center',
                            rich: {
                                num: {
                                    color: '#4d71df',
                                    fontSize: 20
                                }
                            }
                        }
                    },
                    {
                        text: '中级风险' + '{num|' + dataMiddle + '}条',
                        bottom: '5%',
                        left: '49%',
                        textAlign: 'center',
                        textStyle: {
                            color: '#666',
                            fontSize: 20,
                            fontWeight: 'normal',
                            rich: {
                                num: {
                                    color: '#32c78d',
                                    fontSize: 20
                                }
                            }
                        }
                    },
                    {
                        text: '低级风险' + '{num|' + dataLow + '}条',
                        bottom: '5%',
                        left: '84%',
                        textAlign: 'center',
                        textStyle: {
                            color: '#666',
                            fontSize: 20,
                            fontWeight: 'normal',
                            textAlign: 'center',
                            rich: {
                                num: {
                                    color: '#4cb9cd',
                                    fontSize: 20
                                }
                            }
                        }
                    }
                ],
                // 调整图形中间的信息
                graphic: [
                    {
                        type: 'text',
                        top: 'center',
                        left: '11%',
                        style: {
                            text: perHigh,
                            font: '30px "microsoft yahei"',
                            textAlign: 'center',
                            fill: '#4d71df'
                        }
                    },
                    {
                        type: 'text',
                        top: 'center',
                        left: '46%',
                        style: {
                            text: perMiddle,
                            font: '30px "microsoft yahei"',
                            textAlign: 'center',
                            fill: '#35c68d'
                        }
                    },
                    {
                        type: 'text',
                        top: 'center',
                        left: '81%',
                        style: {
                            text: perLow,
                            font: '30px "microsoft yahei"',
                            textAlign: 'center',
                            fill: '#4cb9cd'
                        }
                    }
                ],
                tooltip: {
                    show: false
                },
                series: [
                    {
                        name: '高级风险',
                        type: 'pie',
                        center: ['15%', '50%'],
                        radius: ['50%', '58%'],
                        startAngle: 180, //起始角度
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        hoverAnimation: false,
                        emphasis: false,
                        data: [
                            {
                                value: dataHigh,
                                name: '',
                                itemStyle: {
                                    normal: {
                                        color: '#4e73de'
                                    }
                                }
                            },
                            {
                                name: '',
                                itemStyle: {
                                    emphasis: {
                                        color: '#e6e9f0'
                                    },
                                    normal: {
                                        color: '#e6e9f0'
                                    }
                                },
                                value: total - dataHigh // 总数减去当前项数(灰色占比)
                            }
                        ]
                    },
                    {
                        name: '中级风险',
                        type: 'pie',
                        center: ['50%', '50%'],
                        radius: ['50%', '58%'],
                        startAngle: 180, //起始角度
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        hoverAnimation: false,
                        data: [
                            {
                                value: dataMiddle,
                                name: '',
                                itemStyle: {
                                    normal: {
                                        color: '#35c68d'
                                    }
                                }
                            },
                            {
                                name: '',
                                itemStyle: {
                                    emphasis: {
                                        color: '#e6e9f0'
                                    },
                                    normal: {
                                        color: '#e6e9f0'
                                    }
                                },
                                value: total - dataMiddle // 总数减去当前项数(灰色占比)
                            }
                        ]
                    },
                    {
                        name: '低级风险',
                        type: 'pie',
                        center: ['85%', '50%'],
                        radius: ['50%', '58%'],
                        startAngle: 180, //起始角度
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        hoverAnimation: false,
                        data: [
                            {
                                value: dataLow,
                                name: '',
                                itemStyle: {
                                    normal: {
                                        color: 'red'
                                    }
                                }
                            },
                            {
                                name: '',
                                itemStyle: {
                                    emphasis: {
                                        color: '#e6e9f0'
                                    },
                                    normal: {
                                        color: '#e6e9f0'
                                    }
                                },
                                value: total - dataLow // 总数减去当前项数(灰色占比)
                            }
                        ]
                    }
                ]
            }

            this.myChart.setOption(option)
            // 监听window窗口大小变化的事件
            window.addEventListener('resize',()=>{
                this.myChart.resize();
            })
        }
    }
}
</script>
